<template>
  <div id="gzkz_pie" :style="{ width: '100%', height: '250px' }"></div>
</template>
<script>
import echarts from 'echarts'
let echartData = []

const colorList = ['#4ECB73', '#F56C6C']
export default {
  props: ['pieData'],
  name: 'gzkz_pie',
  data() {
    return {}
  },
  watch: {
    pieData: {
      // 正确给 cData 赋值的 方法
      deep: true,
      handler(newVal, oldVal) {
        echartData = newVal
      },
    },
  },
  mounted() {
    echartData = this.pieData
    var myChart = echarts.init(document.getElementById('gzkz_pie'))
    const option = {
      title: [
        {
          text: `故障快照 {a|快照时间:${this.filters()}}`,
          top: 0,
          left: 0,
          textStyle: {
            fontSize: 16,
            color: '#2F3033',
            rich: {
              a: {
                fontSize: 12,
                color: '#333',
              },
            },
          },
        },
        {
          text: `{laji|设备数量}\n ${echartData[0].value + echartData[1].value}`,
          top: 'center',
          left: 'center',
          textStyle: {
            // fontSize: 14,
            // color: '#646566',
            rich: {
              laji: {
                fontSize: 14,
                color: '#646566',
                height: 30,
              },
            },
          },
        },
      ],
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)',
      },
      legend: {
        // 右侧上方标识
        orient: 'vertical',
        left: '75%',
        icon: 'circle',
        textStyle: {
          // rich: {
          //   0: {
          //     color: colorList[0],
          //     fontSize: 12,
          //   },
          //   1: {
          //     color: colorList[1],
          //     fontSize: 12,
          //   },
          // },
        },
        formatter: function (name) {
          for (let i = 0; i < echartData.length; i++) {
            if (name === echartData[i].name) {
              // return name + '({' + i + '|' + echartData[i].value + '})'
              return name + ' ' + echartData[i].value
            }
          }
        },
      },
      color: colorList,
      series: [
        {
          name: '故障快照',
          type: 'pie',
          radius: ['45%', '80%'],
          center: ['50%', '50%'],
          hoverAnimation: true,
          avoidLabelOverlap: false,
          data: echartData,
          label: {
            normal: {
              show: false,
              position: 'center',
              formatter: '{b}\n{text|{d}%}',
              rich: {
                text: {
                  align: 'center',
                  verticalAlign: 'middle',
                  padding: 8,
                  fontSize: 16,
                },
                value: {
                  align: 'center',
                  verticalAlign: 'middle',
                  fontSize: 20,
                },
              },
            },
            emphasis: {
              show: false, // 是否在中心显示数量
            },
          },
        },
      ],
    }
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      //   让我们图表调用resize方法
      myChart.resize()
    })
  },
  methods: {
    filters() {
      const dt = new Date()
      const y = dt.getFullYear()
      const m = (dt.getMonth() + 1 + '').padStart(2, 0)
      const d = (dt.getDate() + '').padStart(2, 0)
      const hh = (dt.getHours() + '').padStart(2, 0)
      const mm = (dt.getMinutes() + '').padStart(2, 0)
      const ss = (dt.getSeconds() + '').padStart(2, 0)
      return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
    },
  },
}
</script>
<style lang="scss"></style>
